<template>
  <div class="list-selector-search">
    <div
      class="actions"
      :class="{ 'has-filterbox' : isShowFilterBox && showSearch }"
    >
      <slot name="add-btn"></slot>
      <!-- <div class="settings-item" v-if="queryConditions.length >= 1">
        <filterCard
          @clear="clearFilter"
          v-if="queryConditionSource.length === 1"
          :source="queryConditionSource"
        />
        <filterCard
          @item-click="toggleQueryConditions"
          @clear="clearFilter"
          v-else-if="queryConditionSource.length >= 1"
          :source="queryConditionSource"
        />
        <a-tooltip >
          <template slot="title">
            {{ $t('cloudpivot.list.pc.Screen') }}
          </template>
          <i
            class="icon aufontAll  h-icon-all-filter-o"
            :class="{'high-light': isShowFilterBox}"
            @click="toggleQueryConditions"
          ></i>
        </a-tooltip>
      </div>
    </div>
    <div
      class="filters-box show-more"
      v-show="showSearchBox"
    > -->
      <slot name="form"></slot>
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component, Emit, Prop, Vue
} from 'vue-property-decorator';
import filterCard from '../../../../../../list/src/components/pc/components/filter-card/filter-card.vue';


@Component({
  name: 'list-search',
  components: {
    filterCard: filterCard
  }
})

export default class ListSearch extends Vue {

  /**
   * 目前用来区分是反向查询还是关联表单
   */
  @Prop({
    default: true
  })
  showSearch !: boolean;

  @Prop({
    default: false
  })
  showSearchBox !: boolean;

  @Prop({
    default: false
  })
  isShowFilterBox !: boolean;

  @Prop({
    default: false
  })
  isReverse !: boolean;

  @Prop({
    default: []
  })
  queryConditionSource;

  @Prop({
    default: []
  })
  queryConditions;

  @Emit('toggleQueryConditions')
  toggleQueryConditions () {
  }
  @Emit('clearFilter')
  clearFilter () {
  }
}

</script>

<style lang="less" scoped>
@import './../../../../../../common/common';
.list-selector-search {
  // position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  .filters-box {
    position: absolute;
    width: 100%;
    z-index: 666;
    padding: 0 4px 8px;
    background: #fff;

    /deep/.collapsed  {
      // height: 100%;
      // overflow: auto;
    }
    &.show-more{
      height: 100%;
      overflow: auto;
    }
  }
  .actions{
    // text-align: right;
    display: flex;
    // margin-bottom: 8px;
    flex-flow: row-reverse;
    /deep/.ant-btn {
      margin-left: 4px;
    }
  }
  .settings-item {
    margin-left: 20px;
    margin-top: 4px;
    cursor: pointer;
    .icon:hover {
      color: @primary-color;
    }
    .high-light{
      color: @primary-color;
    }
  }
}
.reverse-relevance-list{
  .list-selector-search {
    margin-bottom: 16px;
    .filters-box {
      position: unset;
    }
  }
}
</style>
